// max-sql
$(function() {
    $.ajax({
        type: "get",
        url: "../lib/getall.php",
        dataType: "json",
        success: function(data) {
            // console.log(data)
            let temp = '';
            data.forEach((elm, i) => {
                let pic = JSON.parse(elm.pic);
                // console.log(pic);
                temp += `
                <li>
                    <a href="product.html?id=${elm.id}" target="_blank">
                        <div class="figure">
                            <img  class="lazy" data-original="..${pic[0]['data-original']}" alt="${pic[0].alt}">
                        </div>
                        <h3>
                            ${elm.title}
                        </h3>
                        <p class="desc">
                            ${elm.details}
                        </p>
                        <p class="price">
                            <span>${elm.price}</span>元<span>起</span>
                        </p>
                    </a>
                </li>
                `;
            });
            $('.list').append(temp).find('img').lazyload({
                placeholder: "../img/placeholder-220.png",
                effect: "fadeIn"
            });
        }
    });

    $.ajax({
        type: "get",
        url: "../lib/getall6.php",
        dataType: "json",
        success: function(data) {
            let temp = '';
            data.forEach((elm, i) => {
                let pic = JSON.parse(elm.pic);
                temp += `
                <li>
                    <a href="product.html?id=${elm.id}" target="_blank">
                        <div>
                            <div>
                                <img class="lazy" data-original="..${pic[0]['data-original']}" alt="">
                            </div>
                            <h3>${elm.title}</h3>
                            <p>${elm.details}</p>
                            <p>
                                <span>${elm.price}</span>元
                                <del>${elm.del}</del>
                            </p>
                        </div>
                    </a>
                </li>
                `;
            });
            $('.banner-list').append(temp).find('img').lazyload({
                placeholder: "../img/placeholder-220.png",
                effect: "fadeIn"
            });
        }
    });

    $.ajax({
        type: "get",
        url: "../lib/getall7.php",
        dataType: "json",
        success: function(data) {
            let temp = '';
            data.forEach((elm, i) => {
                let pic = JSON.parse(elm.pic);
                temp += `
                <li>
                    <a href="product.html?id=${elm.id}" target="_blank">
                        <div class="figure">
                            <img  class="lazy" data-original="..${pic[0]['data-original']}" alt="${pic[0].alt}">
                        </div>
                        <h3 class="title">
                            ${elm.title}
                        </h3>
                        <p class="desc">
                            ${elm.details}
                        </p>
                        <p class="price">
                            <span>${elm.price}</span>元
                            <del>${elm.del}</del><span>元</span>
                        </p>
                    </a>
                </li>
                `;
            });
            $('.plain-list').append(temp).find('img').lazyload({
                placeholder: "../img/placeholder-220.png",
                effect: "fadeIn"
            });
        }
    });
})